<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
	<title>Plotr</title>
	<script src="../lib/prototype/prototype.js" type="text/javascript"></script>
	<script src="../lib/plotr/excanvas.js" type="text/javascript"></script>
	<script src="../lib/plotr/Plotr.js" type="text/javascript"></script>	
	<script type="text/javascript">
	var dataset = {
		'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73], [4, 2.56]],
		'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73], [4, 1.9]],
		'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2], [4, 2.4]],
		'myFourthDataset': [[0, .86], [1, 0.83], [2, 3], [3, 1.73], [4, 0.76]],
		'myFifthDataset': [[0, 0.45], [1, 2.2], [2, 2.15], [3, 1.73], [4, 2.5]]
	};
	var options = {
		padding: {left: 30, right: 0, top: 10, bottom: 30},
		backgroundColor: '#dbdbdb',
		colorScheme: 'blue',
		barOrientation: 'horizontal',
	   	xTicks: [{v:0, label:'day 1'}, 
	      	{v:1, label:'day 2'}, 
	      	{v:2, label:'day 3'},
	      	{v:3, label:'day 4'},
	      	{v:4, label:'day 5'}
		]
	};
	
	window.onload = function(){		
		var hor_bar = new Plotr.BarChart('plotr',options);
		hor_bar.addDataset(dataset);
		hor_bar.render();
		
		Object.extend(options,{
			barOrientation: 'vertical',
			colorScheme: 'grey',
			backgroundColor: '#d8efb0',
		});
		
		var vert_bar = new Plotr.BarChart('plotr1',options);
		vert_bar.addDataset(dataset);
		vert_bar.render();	
	}
	</script>
</head>
<body>
	<div><canvas id="plotr" height="500" width="600"></canvas></div>
	<div><canvas id="plotr1" height="300" width="600"></canvas></div>
</body>
</html>